<template>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="crumb in breadcrumbs"
          :key="index"
        >
          <span style="color: aliceblue;">{{ crumb.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  
  const route = useRoute();
  
  // 动态计算面包屑
  const breadcrumbs = computed(() => {
    const matched = route.matched; // 当前匹配的路由数组
    const breadcrumbList = [];
    
    // 遍历 matched 路由，根据 meta.breadcrumb 提取每一级的名称
    matched.forEach((routeRecord) => {
      const breadcrumb = routeRecord.meta?.breadcrumb;
      if (breadcrumb) {
        breadcrumb.forEach((name, index) => {
          breadcrumbList.push({
            name,
            path: index === breadcrumb.length - 1 ? routeRecord.path : '', // 仅为每一级的最后项提供路径
          });
        });
      }
    });
  
    return breadcrumbList;
  });
  </script>
  
  <style scoped>
  .breadcrumb {
    margin: 16px 0;
  }
  </style>
  